<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="master.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                xmlns:c="http://java.sun.com/jsp/jstl/core">
    
    <ui:define name="title">
        Test periode
    </ui:define>
    
    <ui:define name="content">
        
        <h1>Periode</h1>

        <h:form>
            <p>
                <h:outputLabel id="periodeVertrekdatumLabel" for="periodeVertrekdatum" value="Vertrekdatum: " />
                <p:calendar value="#{periodeController.vertrekdatum}" id="periodeVertrekdatum" required="true"/>
            </p>

            <p>
                <h:outputLabel id="periodeTerugkeerdatumLabel" for="periodeTerugkeerdatum" value="Terugkeerdatum: " />
                <p:calendar id="periodeTerugkeerdatum" value="#{periodeController.terugkeerdatum}" required="true"/>
            </p>
            
            <p><h:commandButton value="Submit" action="#{periodeController.insertPeriode()}"></h:commandButton></p>
        </h:form>
        
        <h:dataTable var="periode" value="#{periodeController.perioden}">
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Vertrekdatum:"/>
                </f:facet>
                <h:outputText value="#{periode.vertrekdatum}"/>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:outputText value="Terugkeerdatum:"/>
                </f:facet>
                <h:outputText value="#{periode.terugkeerdatum}"/>
            </h:column>
        </h:dataTable>
        
    </ui:define>  
</ui:composition>